import React, { useEffect } from 'react'
import { connect } from 'react-redux'
import { toggleTheme } from '@zougt/vite-plugin-theme-preprocessor/dist/browser-utils'
import { Switch } from 'antd'

import { setTheme } from '/@/redux/modules/theme/action'   // 主题设置的action

const Sun = () => <i className="iconfont icon-sun"></i>   // 字体图标封装成组件

const Moon = () => <i className="iconfont icon-moon"></i>

const Index: React.FC = ({ isDark, setTheme }: any) => {

    // 根据 Switch开关的 状态来切换主题
    function changeTheme(checked: boolean) {
        const theme = checked ? 'theme-dark' : 'theme-default'
        toggleTheme({
            scopeName: theme
        })
        setTheme(checked)
    }

    // useEffect没有依赖，初始化组件的时候，判断是什么主题色
    useEffect(() => {
        const theme = isDark ? 'theme-dark' : 'theme-default'
        toggleTheme({
            scopeName: theme
        })
    }, [])
    return (
        <Switch
            className="login-theme"
            onChange={changeTheme}
            checkedChildren={<Sun />}
            unCheckedChildren={<Moon />}
            defaultChecked={isDark}
        />
    )
}

// connect 把 React 组件和 Redux 的 store 连接起来

// redux的connect( )参数
// mapStateToProps?: Function
// mapDispatchToProps?: Function | Object
// mergeProps?: Function （不常用）
// options?: Object (不常用)

// connect工作流程
// Provider组件，在原应用组件上包裹一层，使原来整个应用成为Provider的子组件
// 接收Redux的store作为props，通过context对象传递给子孙组件上的connect

// 它真正连接 Redux 和 React，它包在我们的容器组件的外一层，它接收上面 Provider 提供的 store 里面的 state 和 dispatch，传给一个构造函数，返回一个对象，以属性形式传给我们的容器组件

export default connect((state: any) => state.theme, {
    setTheme
})(Index)